<!-- 系列列表 -->
<template>
	
	<z-paging class="content" ref="paging" v-model='dataList' @query='queryList' 
	v-if="isshow">
		<template slot="top">
			<Header :title="title" :isShowRight="false" @back='back' arrowColor='#000' textColor='#000' ></Header>
		</template>
		<!-- #ifdef APP-PLUS -->
		<view style="height: 120rpx;"></view>
		<!-- #endif -->
		<!-- <view style="height: 120rpx;"></view> -->
		<view v-if="seriesInfo.lecturerPropagate" class="banner">
			<image :src="seriesInfo.lecturerPropagate" mode="widthFix" style="width: 100%;"></image>
		</view>
		<!-- <view style="height: 96rpx;background:transparent" v-if="!seriesInfo.lecturerPropagate"></view> -->
		<view class="verial">他的课程</view>
		<view class="item" v-for="(item,index) in dataList" :key='index' @click='goCourseList(item)'>
			<view class="cover">
				<image :src="item.courseCover" mode="aspectFill"></image>
			</view>
			<view class="inner">
				<view class="info">
					<avatar class="avatar" :src="item.courseImg" v-if="item.courseImg"></avatar>
					<view class="right" :style="item.courseImg?'':'width: 100%;'">
						<view class="title">
							<view class='course'>{{item.courseName}}(共{{item.resourcesNum}}节) </view>
							<text style="color: #33a3f8;font-size: 30rpx;font-weight: bold;">
								{{item.isBuy==0?item.buyResourcesNum:item.resourcesNum}}/{{item.resourcesNum}}
							</text>
						</view>
						<view class="contents">
							{{item.courseSynopsis}}
						</view>
					</view>

				</view>
				<view class="teacher">
					<view class="left">
						<text>讲师：</text>
						<view>{{item.realName}}</view>
					</view>
					<view class="right">
						<view class="flex">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/eyes.png" mode="aspectFit"></image>
							<text>{{item.watchNum}}</text>
						</view>
						<view class="flex">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/good.png" mode="aspectFit"></image>
							<text>{{item.greatNum}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		courseSeries,
		seriesDetail
	} from '@/apis/apis.js'
	import Header from '@/components/c_header.vue';
	import avatar from '@/components/avatar.vue'
	export default {
		components: {
			Header,
			avatar
		},
		data() {
			return {
				id: "",
				pid: "",
				lecturerId: "",
				dataList: [],
				title: '',
				seriesId: '',
				seriesInfo: {},
				isshow:false
			}
		},
		onLoad(options) {
			this.id = options.id ? options.id : ""
			this.pid = options.pid ? options.pid : ""
			this.lecturerId = options.lecturerId ? options.lecturerId : ""
			this.title = options.title ? options.title : '讲师系列'
			this.seriesId = options.seriesId
		},
		onShow() {
			this.isshow = true
			this.getInfo();
		},
		onHide() {
			this.isshow = false
		},
		methods: {
			async getInfo() {
				let res = await seriesDetail(this.seriesId)
				this.seriesInfo = res.data;
			},
			queryList(num, size) {
				courseSeries({
					pageNum: num,
					pageSize: size,
					courseClassify: this.pid,
					courseClassifyTwo: this.id,
					lecturerId: this.lecturerId
				}).then(res => {
					console.log('系列列表', res)
					this.$refs.paging.complete(res.data);
				})
			},
			back() {
				uni.navigateBack()
			},
			//跳转课程列表
			goCourseList(v) {
				if(v.resourcesNum>0){
					uni.navigateTo({
						// 传入课程系列id
						url: `../courseList/courseList?seriesId=${v.id}`
					})
				}else{
					this.$u.toast('暂无课程')
				}
				
			}
		},
	}
</script>

<style scoped lang="scss">
	.verial {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #303030;
		margin: 36rpx 0 28rpx 30rpx;
		padding-left: 24rpx;
		position: relative;
	}
	.mttop{
		margin-top: var(--status-bar-height) + 60rpx;
	}
	.banner{
		// margin-top: 100rpx;
	}
	.verial::before {
		content: '';
		position: absolute;
		width: 10rpx;
		height: 26rpx;
		background: #194FC9;
		border-radius: 4rpx;
		transform: translateY(-50%);
		top: 50%;
		left: 0;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: #F8F8F8;

		.item {
			position: relative;
			width: 92%;
			height: 250rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.cover {
				width: 100%;
				height: 100%;
				opacity: .4;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.inner {
				position: absolute;
				top: 0;
				left: 0;
				padding: 28rpx;
				right: 0;

				.info {
					display: flex;
					margin-bottom: 13rpx;

					.avatar {
						// width: 140rpx;
						// height: 140rpx;
						width: 160rpx;
						height: 160rpx;
						// box-shadow: 0px 4px 4px 0px rgba(156, 156, 156, 0.4000);
						border-radius: 10rpx;
						margin-right: 16rpx;
						// margin-right: 32rpx;
					}

					.right {
						// padding: -4rpx 0;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #111111;
						display: flex;
						flex-direction: column;
						padding-top: 20rpx;

						.title {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.course {
								width: 420rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.contents {
							width: 470rpx;
							margin-top: 20rpx;
							// font-size: 28rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #5F5F5F;
							overflow: hidden; //超出的文本隐藏
							display: -webkit-box;
							-webkit-line-clamp: 2; // 超出多少行
							-webkit-box-orient: vertical;
						}
					}


				}

				.teacher {
					// margin-top: 13rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-family: Source Han Sans CN;
					font-size: 26rpx;

					.left {
						display: flex;
						align-items: center;
						color: #656565;

						&>text {
							color: #1C1C1C;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.flex {
							padding-left: 40rpx;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #656565;

							&>image {
								width: 30rpx;
								height: 20rpx;
								margin-right: 4rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
